<template>
  <div class="main-container">
    <n-card title="步骤性任务">
      <template #header-extra>
        <n-switch v-model:value="task1SwitchValue">
          <template #checked>
            展示
          </template>
          <template #unchecked>
            隐藏
          </template>
        </n-switch>
      </template>
      <div v-show="!task1SwitchValue">
        <TaskList :type="1"></TaskList>
      </div>
    </n-card>
    <n-card title="打卡性任务">
      <template #header-extra>
        <n-switch v-model:value="task2SwitchValue">
          <template #checked>
            展示
          </template>
          <template #unchecked>
            隐藏
          </template>
        </n-switch>
      </template>
      <div v-show="!task2SwitchValue">
        <TaskList :type="2"></TaskList>
      </div>
    </n-card>
  </div>

</template>

<script setup lang="ts">
import TaskList from "@/views/task/TaskList.vue";
import LifeModeList from "@/views/lifeMode/lifeModeList/LifeModeList.vue";
import LifeModeItems from "@/views/lifeMode/lifeModeList/LifeModeItems.vue";
import {onBeforeMount, ref, watch} from 'vue'
import useVisitedRouteStore from "@/store/modules/visited-routes";
import UseSurfaceSettingStore from "@/store/modules/surfaceSetting";
import GoalPanel from "@/views/field/goal/GoalPanel.vue";
import FieldSubPanel from "@/views/field/field/FieldSubPanel.vue";

const task1SwitchValue = ref(false)
const task2SwitchValue = ref(false)

</script>

<style scoped>
.n-text {
  font-size: 18px;
}
</style>